<template>
  <div>
    <h3>首页</h3>
    <button @click="$router.go(-1)">后退</button>
    <button @click="aa">看长津湖</button>
    <button @click="bb">查看歌手张学友</button>
    <button></button>
  </div>
</template>

<script>
export default {
  methods: {
    aa () {
      // 1、字符串写法
      // this.$router.push('/movie/2/长津湖')
      // 2、对象写法 -- 使用path跳转（有问题，参数带不过去）
      // this.$router.push({
      //   path: '/movie',
      //   params: {
      //     id: 2,
      //     name: '长津湖'
      //   }
      // })
      // 3、对象写法 -- 使用name跳转 （能够跳转成功）
      // this.$router.push({
      //   name: 'movie',  // 写路由规则的name
      //   params: {
      //     id: 2,
      //     name: '长津湖'
      //   }
      // })
    },
    bb () {
      // 1、字符串写法
      // this.$router.push('/music?id=&&name=张学友')
      // 2、对象写法 -- 使用path跳转
      // this.$router.push({
      //   path: '/music',
      //   query: {
      //     id: 8,
      //     name: '张学友'
      //   }
      // })
      // 3、对象写法 -- 使用name跳转
      // this.$router.push({
      //   name: 'music',
      //   query: {
      //     id: 8,
      //     name: '张学友'
      //   }
      // })
    }
  }
}
</script>

<style scoped>
div {
  min-height: 200px;
  background-color: rgb(128, 0, 19);
}
</style>
